<template>
  <div id="ViewPostView">
    <a-row :gutter="[24, 24]">
      <a-col :md="15" :xs="24">
        <a-tabs default-active-key="post">
          <a-tab-pane key="post" title="帖子详细">
            <a-card v-if="post" :title="post.title">
              <MdView :value="post.content || ''" />
              <template #extra>
                <a-space wrap>
                  <a-tag
                    v-for="(tag, index) of post.tagList"
                    :key="index"
                    color="green"
                    >{{ tag }}
                  </a-tag>
                </a-space>
              </template>
            </a-card>
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :md="9" :xs="24" style="margin-top: 58px">
        <a-card v-if="post" :title="'评论区'">
          <template #extra>
            <a-space wrap>
              <a-button
                style="width: 100px"
                type="primary"
                status="success"
                shape="round"
                @click="handleClick"
                >新增评论
                <template #icon>
                  <icon-edit :size="18" />
                </template>
              </a-button>
              <a-modal
                v-model:visible="visible"
                title="新增帖子"
                @cancel="handleCancel"
                @ok="handleOk(props.id)"
              >
                <a-form :model="form">
                  <a-form-item field="content" label="内容">
                    <a-input v-model="form.content" placeholder="请输入内容" />
                  </a-form-item>
                </a-form>
              </a-modal>
            </a-space>
          </template>
          <a-list
            class="list-demo-action-layout"
            item-layout="horizontal"
            :bordered="false"
            :split="false"
            :data="postComment"
          >
            <template #item="{ item }">
              <div
                style="
                  background-color: #ffffff;
                  width: 400px;
                  height: 80px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin: 10px auto 15px;
                  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
                  border-radius: 10px;
                "
              >
                <a-list-item class="list-demo-item" action-layout="vertical">
                  <template #extra>
                    <div class="image-area" v-if="item.cover">
                      <img
                        alt="arco-design"
                        :src="item.cover"
                        style="
                          border-radius: 10px;
                          width: 100%;
                          height: 100%;
                          object-fit: cover;
                        "
                      />
                    </div>
                  </template>
                  <a-list-item-meta>
                    <template #description>
                      <p class="item-description">{{ item.content }}</p>
                    </template>
                    <template #avatar>
                      <a-avatar
                        shape="square"
                        style="margin-left: 15px"
                        :image-url="item.userVO?.userAvatar"
                      >
                      </a-avatar>
                    </template>
                  </a-list-item-meta>
                </a-list-item>
              </div>
            </template>
            <template #empty>
              <div
                v-for="index in 20"
                :key="index"
                style="
                  background-color: #ffffff;
                  width: 750px;
                  height: 184px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin: 10px auto 15px;
                  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
                  border-radius: 10px;
                "
              >
                <a-skeleton :animation="true">
                  <div style="display: flex; width: 100%">
                    <a-skeleton-shape
                      style="margin-right: 10px; width: 45px; height: 42px"
                    />
                    <a-space
                      direction="vertical"
                      :style="{ width: '450px' }"
                      size="large"
                    >
                      <a-skeleton-line :rows="5" />
                    </a-space>
                    <a-skeleton-shape
                      style="margin-left: 20px; width: 200px; height: 160px"
                    />
                  </div>
                </a-skeleton>
              </div>
            </template>
          </a-list>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, withDefaults, defineProps } from "vue";
import {
  PostCommentAddRequest,
  PostCommentControllerService,
  PostCommentVO,
  PostControllerService,
  PostVO,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import MdView from "@/components/MdView.vue";

//接收前者传来的id
interface Props {
  id: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => "",
});

const post = ref<PostVO>();
const postComment = ref<PostCommentVO[]>();
const visible = ref(false);
const form = ref({
  content: "",
});

const handleClick = () => {
  visible.value = true;
};
// 构建函数
const buildPostCommentAddRequest = (
  content: string,
  postId: number
): PostCommentAddRequest => {
  return {
    content: content,
    postId: postId,
  };
};
const handleOk = async (postId: number) => {
  const request = buildPostCommentAddRequest(form.value.content, postId);
  console.log(form);
  const res = await PostCommentControllerService.addPostCommentUsingPost(
    request
  );
  if (res.code === 0) {
    await loadData();
    message.success("创建成功");
  } else {
    message.error("创建失败:" + res.message);
  }
};
const handleCancel = () => {
  visible.value = false;
};

const loadData = async () => {
  const res = await PostControllerService.getPostVoByIdUsingGet(
    props.id as any
  );
  if (res.code === 0) {
    post.value = res.data;
  } else {
    message.error("加载失败，" + res.message);
  }
  const resComment =
    await PostControllerService.getPostCommentVoListByIdUsingGet(
      props.id as any
    );
  if (resComment.code === 0) {
    postComment.value = resComment.data;
  } else {
    message.error("加载失败，" + resComment.message);
  }
};

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData();
});
</script>

<style>
#ViewPostView {
  max-width: 1200px;
  margin: 0 auto;
}

#viewQuestionView .arco-space-horizontal .arco-space-item {
  margin-bottom: 0 !important;
}
</style>
